<!DOCTYPE html>
<html lang="en">
<head>
	<title>three.js webgl - lights - rect area light</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
		body {
			background-color: #000;
			margin: 0px;
			overflow: hidden;
		}

		#info {
			position: absolute;
			top: 0px;
			width: 100%;
			color: #ffffff;
			padding: 5px;
			font-family: Monospace;
			font-size: 13px;
			text-align: center;
		}

		a {
			color: #ff0080;
			text-decoration: none;
		}

		a:hover {
			color: #0080ff;
		}
	</style>
</head>
<body>

	<div id="info">
	</div>

	<script src="./js/three.min.js"></script>
	<script src="./js/RectAreaLightUniformsLib.js"></script>
	<script src="./js/WebGL.js"></script>

	<script>
		window.innerWidth =645
		window.innerHeight=410
		if (WEBGL.isWebGLAvailable() === false) {
			document.body.appendChild(WEBGL.getWebGLErrorMessage());
		}
    const SPEED=50
		var renderer, scene, camera,controls;
    var groupArr=[];
    let picCe
		var flag = false;
    //z主贴图
		var picArr=["./img/huoying/1.jpg","./img/huoying/2.jpg","./img/huoying/3.jpg","./img/huoying/4.jpg","./img/huoying/5.jpg","./img/huoying/6.jpg","./img/huoying/7.jpg"];
    //侧边发光贴图
    var picArrCe=["./img/tie_guang.png"]
		init();
		animate();
		function init() {
			renderer = new THREE.WebGLRenderer({antialias: true});
			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(window.innerWidth, window.innerHeight);
			renderer.shadowMap.enabled = true;
			renderer.shadowMap.type = THREE.PCFSoftShadowMap;
			renderer.gammaInput = true;
			renderer.gammaOutput = true;
			document.body.appendChild(renderer.domElement);

			if (!renderer.extensions.get('OES_texture_float')) {
				alert('OES_texture_float not supported');
				throw 'missing webgl extension';
			}
			if (!renderer.extensions.get('OES_texture_float_linear')) {
				alert('OES_texture_float_linear not supported');
				throw 'missing webgl extension';
			}
			camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
			camera.position.set(0, 5, 280);
			scene = new THREE.Scene();
			function initScene() {
				//给场景添加天空盒子纹理
				var cubeTextureLoader = new THREE.CubeTextureLoader();
				cubeTextureLoader.setPath( './img/' );
				//六张图片分别是朝前的（posz）、朝后的（negz）、朝上的（posy）、朝下的（negy）、朝右的（posx）和朝左的（negx）。
				var cubeTexture = cubeTextureLoader.load( [
					'right.jpg', 'left.jpg',
					'top.jpg', 'bottom.jpg',
					'front.jpg', 'back.jpg'
				]); 
				scene = new THREE.Scene();
				scene.background = cubeTexture;
			}
			initScene();
      var light = new THREE.PointLight( 0xffffff );
			light.position.set( 0, 1000, 0 );
			scene.add( light );
			var ambient = new THREE.AmbientLight(0xffffff, 1);
			scene.add(ambient);		  
    for(let i=0;i<=5;i++){
       let group = new THREE.Group();
			  scene.add(group);
        groupArr.push(group)
      }

			let geometry = new THREE.BoxGeometry(100, 100, 5, 600, 1);
			//需要长：280，高300 平分6分，60度，中间有间隙取50度，  通过公式，为L=n× π× r/180，L=α× r。其中n是圆心角度数，r是半径，L是圆心角弧长得 r=320,n=50,弧度=280，
			//100=100*3.14*r/180 r=57.3
			geometry.vertices.forEach(function(item) {
				item.z += Math.sqrt(120*120 - item.x * item.x) - 120;
			});

			var materialPicBg = new THREE.MeshBasicMaterial({
				color: '#0088cb',
				opacity: 0.5,
				transparent: true,
				roughness: 0, metalness: 0,
			});
      picCe=new THREE.TextureLoader().load(picArrCe[0]);

      var materialPicCeImg = new THREE.MeshBasicMaterial({
				map: picCe,
				transparent: true,
				opacity: 0.5,
				side:THREE.DoubleSide
			});

        let materialPicImgArr=[]
        let materialArr=[]
      for(let i=0;i<=5;i++){
        //加载图片
        let TemPic=new THREE.TextureLoader().load(picArr[i])
        //图片材料
        let materialPicImg=new THREE.MeshBasicMaterial({
            map: TemPic,
            transparent: true,
            opacity: 0.9,
            side:THREE.DoubleSide
			  });
        materialPicImgArr.push(materialPicImg)
        let material=[]
        //6面的图片材料
        material.push(materialPicCeImg, materialPicCeImg, materialPicCeImg, materialPicBg,materialPicImgArr[i], materialPicBg)
        let cube = new THREE.Mesh(geometry, material);
			  cube.position.set(0, 0,  120);
	      groupArr[i].add(cube)
        groupArr[i].rotateY(Math.PI*2/6*i);
        if(i!==0){
          groupArr[0].add(groupArr[i])
        }
      }
			}
		function onResize() {
				renderer.setSize(window.innerWidth, window.innerHeight);
				camera.aspect = (window.innerWidth / window.innerHeight);
				camera.updateProjectionMatrix();
		}
      window.addEventListener('resize', onResize, false);
			function animate() {
				requestAnimationFrame(animate);
				render();
			}
			function render() {
				var t = ( Date.now() /1000 );
				//angle/t=Math.PI*2/360
				var angle_current=Math.PI*2/360*t;
        groupArr[0].rotation.y  =- angle_current*SPEED;
				renderer.render(scene, camera);
			}
	</script>
</body>
</html>
